<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo/demo.css">
    <script type="text/javascript" src="../jquery.min.js"></script>
    <script type="text/javascript" src="../jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../jquery.serialize-object.js"></script>
</head>
<body>
    <ul id="tt"></ul>
    <form id="ff">
        <div style="margin-bottom:20px">
            <label style="width: 85px;text-align: left">
                根节点：
            </label>
            <input type="text" name="parentId" id="parentId"/>
        </div>
        <div style="margin-bottom:20px">
            <input class="easyui-textbox" id="text" name="text" style="width:50%" data-options="label:'Text:',required:true">
        </div>
    </form>
    <div style="text-align:left;padding:5px 0">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="addChildNode()" style="width:80px">添加子节点</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="addRootNode()" style="width:80px">添加根节点</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="removNode()" style="width:80px">删除节点</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="editNode()" style="width:80px">修改节点</a>
    </div>
</body>
</html>
<script>
    $(function () {
        $('#tt').tree({
            method:"get",
            url:'http://localhost:3000/classify/list',
            onClick(node){
                $('#ff').form('load',{
                    parentId:node.parentId,
                    text:node.text,
                });
            },
            onDblClick(node){
                $('#ff').form('load',{
                    parentId:node.parentId,
                    text:node.text,
                });
            }
        });
    });
    function addChildNode() {
       $('#ff').form('submit',{

           onSubmit:function(){
               var selectedNode = $('#tt').tree('getSelected');
               if(selectedNode!=null){
                   if($(this).form('enableValidation').form('validate')){
                       var data=$('#ff').serializeObject();
                       data.parentId=$('#tt').tree('getSelected')._id;
                       console.log(data);
                       $.ajax({
                            url:'http://localhost:3000/classify/data',
                            method:'post',
                            data: data
                        }).done(function(res){
                            $("#tt").tree("reload")
                        })

                   }else {
                       $.messager.alert('提示','请填写完整信息!');
                   }
               }else {
                   $.messager.alert('提示','请选择父文件夹!');
               }
           }
       });
   }
    function addRootNode() {
        $('#ff').form('submit',{
            onSubmit:function(){
                if($(this).form('enableValidation').form('validate')){
                    var data=$('#ff').serializeObject();
                    delete data.parentId;
                    //修改节点
                    $.ajax({
                        url:'http://localhost:3000/classify/data',
                        method:'post',
                        data: data
                    }).done(function(res){
                        $("#tt").tree("reload")
                    })
                }else{
                    $.messager.alert('提示','请输入完整信息!');
                }
            }
        });
    }
    function removNode() {
        var selectedNode = $('#tt').tree('getSelected');
        if(selectedNode!=null){
            $.messager.confirm('提示', '你确定要删除吗?', function(b){
                if (b){
                    $.ajax({
                        url:'http://localhost:3000/classify/data/' + selectedNode._id,
                        method:'delete'
                    }).done(function(res){
                        $("#tt").tree("reload")
                    })
                }
            });
        }else {
            $.messager.alert('提示','请选择要删除的文件夹!');
        }
    }
    function editNode() {
        $('#ff').form('submit',{
            onSubmit:function(){
                if($(this).form('enableValidation').form('validate')){
                    var data=$('#ff').serializeObject();
                    var selectedNode = $('#tt').tree('getSelected');
                        delete data.parentId;
                        $.ajax({
                            url:'http://localhost:3000/classify/data/'+selectedNode._id,
                            method:'put',
                            data: data
                        }).done(function(res){
                            $("#tt").tree("reload")
                        })
//                    $.ajax({
//                        url:"http://127.0.0.1:3000/classify/data/"+selectedNode._id,
//                        method:"put",
//                        data
//                    })
                }else{
                    $.messager.alert('提示','请选择要修改的文件夹!');
                }
            }
        });
    }
</script>